﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap网页loading加载图标动画特效</title>

<link type="text/css" href="/css/loading.css" rel="stylesheet" />

<link rel="stylesheet" href="/css/bootstrap.css" />

</head>
<body>

<div class="container text-center">
  <div class="row">
    <div class="col-sm-2">
      <div class="sp sp-circle"></div>
      <h5>圆圈</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-3balls"></div>
      <h5>3 球</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-volume"></div>
      <h5>体积</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-vortex"></div>
      <h5>涡流</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-slices"></div>
      <h5>切片</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-sphere"></div>
      <h5>球体</h5>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-2">
      <div class="sp sp-bars"></div>
      <h5>木块</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-clock"></div>
      <h5>时钟</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-wave"></div>
      <h5>波纹</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-texture"></div>
      <h5>纹理</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-loadbar"></div>
      <h5>加载条</h5>
    </div>
    <div class="col-sm-2">
      <div class="sp sp-hydrogen"></div>
      <h5>圆形工具</h5>
    </div>
  </div>
</div>

</body>
</html>

